<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-11 17:44:03
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-07-12 16:23:37
 * @FilePath: \ant-design-vue-jeecg-master\src\views\netResourceManagement\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="netResource">
    <div>
      <!-- <a-button type="primary" @click="statistics">分析</a-button> -->
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        size="small"
        :style="{ margin: '15px' }"
      >
        <!-- <a-table :columns="columns" @expand="handleExpand" :data-source="data" bordered> -->
        <span slot="action" slot-scope="text, record">
          <a-button @click="forcedExit(record)" type="primary">强制退网</a-button>
          <!-- <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>-->
        </span>
        <!-- <a-table slot="expandedRowRender" :columns="innerColumns" :data-source="innerData" :pagination="false">
        </a-table>-->
      </a-table>
    </div>

    <div class="chartDisplays">
      <div class="checkBody">
        <h2>
          时隙占用情况
          <!-- <span class="KX">空闲</span>
          <span class="redTag">车4</span>
          <span class="yellowTag">车3</span>
          <span class="pinkTag">车2</span>
          <span class="employTag">车1</span>-->
          (
          <span id="spanBox"></span>
          <!-- <span class="employTag">车1</span>
          <span class="pinkTag">车2</span>
          <span class="yellowTag">车3</span>
          <span class="redTag">车4</span>-->

          <span class="KX">空闲</span>)
        </h2>
        <div class="tableContainer">
          <div v-for="(item,index) in 5" class="tableBox">
            <span v-for="(i,idx) in 6">{{i+(index*6)}}</span>
          </div>
        </div>
      </div>

      <!-- <div id="main"></div> -->
    </div>

    <statistics ref="statistics" />
  </div>
</template>

<script>
import statistics from './modules/statistics.vue'
import pool from '../taskManagement/modules/resourcePool1'
import { getAction } from '../../api/manage'
import * as echarts from 'echarts'
import { Turns, hex2int } from '@/utils/util.js'
export default {
  components: {
    pool,
    statistics,
  },
  data() {

    const columns = [
      // {
      //   title: '指挥车名称',
      //   dataIndex: 'name',
      //   key: 'name',
      //   // slots: { title: 'customTitle' },
      //   // scopedSlots: { customRender: 'name' },
      // },
      // {
      //   title: '信道号分配总数（个）',
      //   dataIndex: 'total',
      //   key: 'total',
      // },
      // {
      //   title: '信道号使用总数（个）',
      //   dataIndex: 'usage',
      //   key: 'usage',
      // },
      // {
      //   title: '信道号使用率',
      //   dataIndex: 'rate',
      //   key: 'rate',
      // },
      // {
      // title: '资源统计表',
      // children: [
      {
        title: '指挥车名称',
        dataIndex: 'name',
        key: 'name',
        // slots: { title: 'customTitle' },
        // scopedSlots: { customRender: 'name' },
      },
      // {
      //   title: '状态',
      //   dataIndex: 'status',
      //   key: 'status',
      // },
      {
        title: '指控车频率资源使用状态',
        children: [
          {
            title: '上行频点号',
            dataIndex: 'upFrequencyNo',
            key: 'upFrequencyNo',
          },
          {
            title: '下行频点号',
            dataIndex: 'downFrequencyNo',
            key: 'downFrequencyNo',
          },
        ],
      },
      {
        title: '指控车时隙资源使用状态',
        // dataIndex: 'slotUsage',
        // key: 'slotUsage',
        children: [
          {
            title: '总时隙个数',
            dataIndex: 'total',
            key: 'total',
          },
          {
            title: '使用时隙个数',
            dataIndex: 'usage',
            key: 'usage',
          },
          {
            title: '占用的时隙号',
            dataIndex: 'slotUsage',
            key: 'slotUsage',
          },
          {
            title: '时隙使用率',
            dataIndex: 'rate',
            key: 'rate',
          },
        ],
      },
      // {
      //   title: '导弹资源使用状态',
      //   children: [
      //     {
      //       title: '导弹1',
      //       dataIndex: 'terminal1',
      //       key: 'terminal',
      //     },
      //     {
      //       title: '导弹2',
      //       dataIndex: 'terminal2',
      //       key: 'terminal2',
      //     },
      //     {
      //       title: '导弹3',
      //       dataIndex: 'terminal3',
      //       key: 'terminal3',
      //     },

      //     {
      //       title: '导弹4',
      //       dataIndex: 'terminal4',
      //       key: 'terminal4',
      //     },
      //   ],
      // },
      // ],
      // },

      {
        title: '操作',
        key: 'action',
        align: 'center',
        scopedSlots: { customRender: 'action' },
      },
    ]
    const innerColumns = [
      {
        title: '导弹名称',
        dataIndex: 'ballName',
        key: 'ballName',
      },
      {
        title: '信道号分配总数',
        dataIndex: 'totalAllocation',
        key: 'totalAllocation',
      },
      {
        title: '信道号使用总数',
        dataIndex: 'totalUsage',
        key: 'totalUsage',
      },
      {
        title: '信道分配编号',
        dataIndex: 'allocationNo',
        key: 'allocationNo',
      },
      {
        title: '信道使用编号',
        dataIndex: 'usageNo',
        key: 'usageNo',
      },
      {
        title: '信道使用率',
        dataIndex: 'usageRate',
        key: 'usageRate',
      },
      {
        title: '发射车经度（°）',
        dataIndex: 'lng',
        key: 'lng',
      },
      {
        title: '发射车纬度（°）',
        dataIndex: 'lat',
        key: 'lat',
      },
    ]
    const data = [
      {
        key: '1',
        name: '2100',
        status: '入网',
        upFrequencyNo: 'F1',
        downFrequencyNo: 'F2',
        slotUsage: '1,2,3,4,5,6,7,8,9,10,11,12',
        terminal1: 1,
        terminal2: 2,
        terminal3: 3,
        terminal4: 4,
        usage: 6,
        total: 30,
        rate: '40%',
        childrenBall: [
          {
            key: '1-1',
            ballName: '导弹1',
            totalAllocation: 20,
            totalUsage: 10,
            allocationNo: 10,
            usageNo: 12,
            usageRate: '15%',
            lng: 109,
            lat: 34,
            hei: 15000,
          },
          {
            key: '1-2',
            ballName: '导弹2',
            totalAllocation: 20,
            totalUsage: 10,
            allocationNo: 10,
            usageNo: 12,
            usageRate: '15%',
            lng: 109,
            lat: 34,
            hei: 15000,
          },
          {
            key: '1-3',
            ballName: '导弹3',
            totalAllocation: 20,
            totalUsage: 10,
            allocationNo: 10,
            usageNo: 12,
            usageRate: '15%',
            lng: 109,
            lat: 34,
            hei: 15000,
          },
          {
            key: '1-4',
            ballName: '导弹4',
            totalAllocation: 20,
            totalUsage: 10,
            allocationNo: 10,
            usageNo: 12,
            usageRate: '15%',
            lng: 109,
            lat: 34,
            hei: 15000,
          },
          {
            key: '1-5',
            ballName: '导弹5',
            totalAllocation: 20,
            totalUsage: 10,
            allocationNo: 10,
            usageNo: 12,
            usageRate: '15%',
            lng: 109,
            lat: 34,
            hei: 15000,
          },
        ],
      },

      {
        key: '3',
        name: '2200',
        status: '入网',
        upFrequencyNo: 'F1',
        downFrequencyNo: 'F2',
        slotUsage: '13,14,15,16,17,18',
        terminal1: 1,
        terminal2: 2,
        terminal3: 3,
        terminal4: 4,
        usage: 6,
        total: 30,
        rate: '20%',
      }, {
        key: '2',
        name: '2300',
        status: '入网',
        upFrequencyNo: 'F1',
        downFrequencyNo: 'F2',
        slotUsage: '25,26,27,28,29,30',
        terminal1: 1,
        terminal2: 2,
        terminal3: 3,
        terminal4: 4,
        usage: 6,
        total: 30,
        rate: '20%',
      },
      {
        key: '4',
        name: '2400',
        status: '入网',
        upFrequencyNo: 'F1',
        downFrequencyNo: 'F2',
        slotUsage: '19,20,21,22,23,24',
        terminal1: 1,
        terminal2: 2,
        terminal3: 3,
        terminal4: 4,
        usage: 6,
        total: 30,
        rate: '20%',
      },
      // {
      //   key: '5',
      //   name: '指控车5',
      //   status: '入网',
      //   upFrequencyNo: 'F1',
      //   downFrequencyNo: 'F2',
      //   slotUsage: '25,26,27,28,29,30',
      //   terminal1: 1,
      //   terminal2: 2,
      //   terminal3: 3,
      //   terminal4: 4,
      //   usage: 6,
      //   total: 60,
      //   rate: '10%',
      // },
    ]
    return {
      colorList: ['#f51616', '#e0f17a', ' #f57dab', 'rgb(123, 243, 93)'],
      tagList: ['redTag', 'yellowTag', 'pinkTag', 'employTag'],

      legendList: [
        { identificationCode: "2100", usageSlot: [0, 1] },
        { identificationCode: "2200", usageSlot: [2] },
        { identificationCode: "2300", usageSlot: [3] },
        { identificationCode: "2400", usageSlot: [4] },
      ],
      data,
      columns,
      form1: {},
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      statusList: [
        { label: '1', status: 1 },
        { label: '2', status: 1 },
        { label: '3', status: 1 },
        { label: '4', status: 1 },
        { label: '5', status: 1 },
        { label: '6', status: 1 },
        { label: '7', status: 2 },
        { label: '8', status: 2 },
        { label: '9', status: 2 },
        { label: '10', status: 2 },
        { label: '11', status: 2 },
        { label: '12', status: 2 },
        { label: '13', status: 3 },
        { label: '14', status: 3 },
        { label: '15', status: 3 },
        { label: '16', status: 3 },
        { label: '17', status: 3 },
        { label: '18', status: 3 },
        { label: '19', status: 4 },
        { label: '20', status: 4 },
        { label: '21', status: 4 },
        { label: '22', status: 4 },
        { label: '23', status: 4 },
        { label: '24', status: 4 },
        { label: '25', status: 0 },
        { label: '26', status: 0 },
        { label: '27', status: 0 },
        { label: '28', status: 0 },
        { label: '29', status: 0 },
        { label: '30', status: 0 },
      ],
      statusList1: [],
      listParams: [{ label: '15指挥车网络状态上报' }, { label: '16导弹网络状态上报' }],
      url: {
        getGridValueByCode: '/grid/nmcRelationPackageGrid/detail/list',
      },
      innerColumns,
      innerData: [],
    }
  },
  activated() {
    this.statusList1 = []
    // this.statusList = []
  },
  // created() {
  //   this.init()
  //   this.getList()
  // },
  mounted() {
    this.$nextTick(() => {
      // this.init()
      // this.getList()
      this.initPseudoClasses()
    })
    // this.getList()
    // this.init()
    // 2绿色 0灰色 1空白
    // this.statusList1[1].status = 2
    // this.statusList1[1].label = '通信指控车1导弹2'
    // this.statusList1[0].status = 2
    // this.statusList1[0].label = '通信指控车1导弹1'
    // this.statusList[1].status = 2
    // this.statusList[1].label = '通信指控车1'
    // this.statusList[2].status = 2
    // this.statusList[2].label = '通信指控车2'
  },
  methods: {
    initPseudoClasses() {
      let div = document.getElementById('spanBox')
      let { colorList, tagList } = this
      this.legendList.forEach((i, index) => {
        let newSpan = document.createElement('span')
        newSpan.innerHTML = i.identificationCode
        newSpan.style.marginRight = '8px'
        //添加伪类元素---
        var style = document.createElement("style");
        style.type = "text/css";
        let css = `.${tagList[index]}:before{content:'';margin-right: 5px;border: 0.1px solid #7e7c7c;width: 12px;height: 12px;display: inline-block;background: ${colorList[index]};}`
        style.appendChild(document.createTextNode(css))
        newSpan.appendChild(style)
        //添加伪类元素---
        newSpan.setAttribute("class", tagList[index])
        div.appendChild(newSpan)
        // i.bgColor = colorList[index]
        console.log(i, 'index')
        i.usageSlot.forEach(j => {
          document.getElementsByClassName('tableBox')[Number(j)].style.background = colorList[index]
        })
      })
    },
    forcedExit() { },
    handleExpand(expanded, record) {
      console.log(expanded, record)
      if (expanded) this.innerData = [...JSON.parse(JSON.stringify(record.childrenBall))]
    },
    init() {
      // for (let i = 0; i < 1920; i++) {
      //   this.statusList1.push({ label: i + 1, status: 0 })
      // }
      // this.statusList1[1].status = 2
      // this.statusList1[1].label = '通信指控车1导弹2'
      // this.statusList1[0].status = 2
      // this.statusList1[0].label = '通信指控车1导弹1'
      // for (let i = 0; i < 30; i++) {
      //   this.statusList.push({ label: i + 1, status: 0 })
      // }
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '',
          subtext: '',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log(params, 'params')
            return (
              '<div>' +
              params.name +
              '<br>' +
              '时隙个数:' +
              params.value +
              '<br>' +
              '时隙号:' +
              params.data.infos +
              '</div>'
            )
          },
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            name: '时隙号：',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 6, name: '指控车1', infos: '1,2,3,4,5,6', itemStyle: { color: '#73c0de' } },
              { value: 6, name: '指控车2', infos: '7,8,9,10,11,12', itemStyle: { color: '#ee6666' } },
              { value: 6, name: '指控车3', infos: '12,14,15,16,17,18', itemStyle: { color: '#fac858' } },
              { value: 6, name: '指控车4', infos: '19,20,21,22,23,24', itemStyle: { color: '#5470c6' } },
              { value: 6, name: '指控车5', infos: '25,26,27,28,29,30', itemStyle: { color: '#91cc75' } },
            ],
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 0,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)',
            //   },
            // },
          },
        ],
      }
      option && myChart.setOption(option)
    },

    getList() {
      getAction(this.url.getGridValueByCode, { packageCode: '15指挥车网络状态上报', pageSize: -1 }).then((res) => {
        let result = res.result.records
        // this.data[0].upFrequencyNo = result.find((item) => item.gridName == '15-星指上行链路频点号').latestValue
        // this.data[0].downFrequencyNo = result.find((item) => item.gridName == '15-星指下行链路频点号').latestValue
        let vales = result.find((item) => item.gridName == '15-该车使用的具体时隙号').latestValue
        this.trunSlot(vales)
      })
      getAction(this.url.getGridValueByCode, { packageCode: '16导弹网络状态上报', pageSize: -1 }).then((res) => {
        let result = res.result.records
        this.data[0].terminal1 = Turns(result.find((item) => item.gridName == '16-DD1使用上行信道1').latestValue, 4)
        this.data[0].terminal2 = Turns(result.find((item) => item.gridName == '16-DD1使用上行信道2').latestValue, 4)
        this.data[0].terminal3 = Turns(result.find((item) => item.gridName == '16-DD1使用上行信道3').latestValue, 4)
        this.data[0].terminal4 = Turns(result.find((item) => item.gridName == '16-DD1使用上行信道4').latestValue, 4)

        // let arr = [this.data[0].terminal4, this.data[0].terminal3, this.data[0].terminal2, this.data[0].terminal1]

        // arr.forEach((i) => {
        //   if (this.$refs.pool.subData.find((item) => item.id == i)) {
        //     this.$refs.pool.subData.find((item) => item.id == i).check = true
        //   }
        // })
        // arr.forEach((i) => {
        //   that.statusList1.forEach((item) => {
        //     console.log(item, 'item')
        //     if (item.label == i) {
        //       item.status = 2
        //     }
        //   })
        // })

        // this.trunSlot(vales)
      })
    },
    trunSlot(vales) {
      let tempData = vales.slice(-8)
      let data = Turns(tempData, 2).split('')
      let Arr = []
      data.forEach((item, index) => {
        if (item == 0) Arr.push(data.length - index)
      })
      let endResult = Arr.reverse()
      const that = this
      endResult.forEach((i) => {
        that.statusList.forEach((item) => {
          if (item.label == i) {
            item.status = 2
          }
        })
      })
      // this.statusList.find()
      this.data[0].slotUsage = endResult.join(',') //时隙号
    },
    statistics() {
      this.$refs.statistics.showModal()
    },
  },
}
</script>

<style lang="less" scoped>
.tableContainer {
  width: 100%;
  display: flex;
  margin-top: 80px;
  margin-left: 10px;
  box-sizing: border-box;
  // border: solid 0.1px;
  flex-wrap: wrap;
  line-height: 1;
  .tableBox {
    line-height: 1;
    box-sizing: border-box;
    // box-sizing: border-box;
    // line-height: 30px;
    margin: 0;
    span {
      display: inline-block;
      box-sizing: border-box;
      width: 40px;
      line-height: 40px;
      text-align: center;
      height: 40px;
      border: solid 0.1px rgb(148, 148, 148);
    }
  }
  .tableItem {
    width: 40px;
    height: 40px;
    border: solid 0.1px #e3e3e3;
    margin: -1px 0 0 -1px;
    .tableItem-label {
      display: inline-block;
      line-height: 40px;
      width: 40px;
      height: 40px;
    }
  }
}
.netResource {
  .ant-checkbox-group {
    // height: 300px;
    line-height: 0.9;
    .ant-checkbox-wrapper {
      margin: 0;
    }
    .ant-col {
      width: auto;
      margin: 0;
    }
  }
}
.employ {
  background-size: 25px 25px;
  background-color: rgb(123, 243, 93);
  background-image: -webkit-linear-gradient(
    -45deg,
    rgba(133, 201, 56, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(139, 248, 96, 0.2) 50%,
    rgba(116, 115, 115, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    -45deg,
    rgba(107, 106, 106, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(134, 132, 132, 0.2) 50%,
    rgba(117, 116, 116, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.empty {
  background-size: 50px 50px;
  background-color: rgb(68, 69, 70);
  background-image: -webkit-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(116, 115, 115, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    -45deg,
    rgba(107, 106, 106, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(134, 132, 132, 0.2) 50%,
    rgba(117, 116, 116, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
#main {
  width: 600px;
  height: 420px;
}
.chartDisplays {
  padding-left: 50px;
  display: flex;
  justify-content: space-around;
  // align-items: center;
  .checkBody {
    width: 100%;
    margin-top: 80px;
    h2 {
      color: #fff;
      margin: 15px;
      padding-right: 200px;
    }
  }
}
.red {
  background-color: #f51616;
}
.redTag::before {
  content: '';
  display: inline-block;
  height: 12px;
  width: 12px;
  border: 0.1px solid #7e7c7c;
  margin-right: 5px;
  background: #f51616;
}
.pink {
  background-color: #f57dab;
}
.pinkTag::before {
  content: '';
  display: inline-block;
  height: 12px;
  width: 12px;
  border: 0.1px solid #7e7c7c;
  margin-right: 5px;
  background: #f57dab;
}
.yellow {
  background-color: #e0f17a;
}
.KX {
  // height: 12px;
  // width: 12px;
  // border: 1px solid;
}
.KX::before {
  content: '';
  display: inline-block;
  height: 12px;
  width: 12px;
  border: 0.1px solid #7e7c7c;
  margin-right: 5px;
  background: transparent;
}
.yellowTag::before {
  content: '';
  display: inline-block;
  height: 12px;
  width: 12px;
  border: 0.1px solid #7e7c7c;
  margin-right: 5px;
  background: #e0f17a;
}
.redTag,
.pinkTag,
.yellowTag,
.redTag,
.KX,
.employTag,
.emptyTag {
  // float: right;
  font-size: 14px;
  line-height: 30px;
  margin-right: 5px;
}
.employTag::before {
  content: '';
  display: inline-block;
  height: 12px;
  width: 12px;
  border: 0.1px solid #7e7c7c;
  margin-right: 5px;
  background: rgb(123, 243, 93);
}
</style>
